<template>
  <div>
    <h3>基础布局</h3>
    <div style="width:600px;">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
    </div>

    <el-collapse style="margin-top: 5px;">
      <el-collapse-item title="查看代码">
<pre><code><span>&lt;<span>el-row</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"24"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-dark"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
<span>&lt;/<span>el-row</span>&gt;</span>
<span>&lt;<span>el-row</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"12"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"12"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
<span>&lt;/<span>el-row</span>&gt;</span>
<span>&lt;<span>el-row</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"8"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"8"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"8"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
<span>&lt;/<span>el-row</span>&gt;</span>
<span>&lt;<span>el-row</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"6"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"6"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"6"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"6"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
<span>&lt;/<span>el-row</span>&gt;</span>
<span>&lt;<span>el-row</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
  <span>&lt;<span>el-col</span> <span>span</span>=<span
  >"4"</span>&gt;</span><span>&lt;<span>div</span> <span
  >class</span>=<span>"grid-content bg-purple-light"</span>&gt;</span><span
  >&lt;/<span>div</span>&gt;</span><span>&lt;/<span
  >el-col</span>&gt;</span>
<span>&lt;/<span>el-row</span>&gt;</span>

<span>&lt;<span>style</span>&gt;</span><span class="undefined">
  .el-row {
    margin-bottom: 20px;
    &amp;:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</span><span>&lt;/<span>style</span>&gt;</span>
</code></pre>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
    export default {
        name: 'Select',
        data() {
            return {}
        }
    }
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
